<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精品商城</title>
    <!-- 使用本地Font Awesome资源 -->
    <link rel="stylesheet" href="./font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="./style/toast.css">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            user-select: none;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        /* 导航栏 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 5%;
            background-color: #fff;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #ff6b81;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 8px;
            font-size: 28px;
        }

        .nav-center {
            display: flex;
            align-items: center;
            flex-grow: 1;
            justify-content: center;
        }

        .search-box {
            position: relative;
            width: 50%;
            max-width: 600px;
            margin: 0 30px;
            display: flex;
            align-items: center;
        }

        .search-box input {
            width: 100%;
            padding: 12px 20px;
            padding-right: 50px;
            border: 1px solid #e0e0e0;
            border-radius: 30px;
            font-size: 14px;
            outline: none;
            transition: all 0.3s;
            background-color: #f5f5f5;
        }

        .search-box input:focus {
            background-color: white;
            border-color: #ff6b81;
            box-shadow: 0 0 0 3px rgba(255, 107, 129, 0.2);
        }

        .search-box button {
            position: absolute;
            right: 5px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ff6b81;
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }

        .search-box button:hover {
            background-color: #ff4757;
            transform: scale(1.05);
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin: 0 12px;
        }

        .nav-links a {
            text-decoration: none;
            color: #555;
            font-weight: 500;
            transition: color 0.3s;
            font-size: 15px;
        }

        .nav-links a:hover {
            color: #ff6b81;
        }

        /* 用户昵称样式 */
        .user-profile {
            position: relative;
            cursor: pointer;
            margin-left: 20px;
        }

        .nickname {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            background-color: #ff6b81;
            color: white;
            border-radius: 20px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .nickname:hover {
            background-color: #ff4757;
            box-shadow: 0 5px 15px rgba(255, 107, 129, 0.3);
        }

        .nickname span {
            margin-right: 8px;
        }

        .nickname .arrow {
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        /* 箭头旋转动画 */
        .user-profile:hover .nickname .arrow {
            transform: rotate(180deg);
        }

        .dropdown-menu {
            position: absolute;
            top: 50px;
            right: 0;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
            width: 220px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 10;
            padding: 10px 0;
        }

        .user-profile:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            top: 45px;
        }

        .dropdown-menu ul {
            list-style: none;
        }

        .dropdown-menu li {
            padding: 12px 20px;
            transition: all 0.2s;
        }

        .dropdown-menu li:hover {
            background-color: #f8f9fa;
        }

        .dropdown-menu li i {
            margin-right: 10px;
            color: #777;
            width: 20px;
            text-align: center;
        }

        .dropdown-menu a {
            text-decoration: none;
            color: #555;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        /* 横幅 */
        .banner {
            height: 450px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
            margin-bottom: 50px;
        }

        .banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
            opacity: 0.2;
        }

        .banner-content {
            z-index: 2;
            max-width: 800px;
            padding: 0 20px;
        }

        .banner h1 {
            font-size: 48px;
            margin-bottom: 20px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            font-weight: 700;
        }

        .banner p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .btn {
            padding: 14px 35px;
            background-color: white;
            color: #ff6b81;
            border: none;
            border-radius: 30px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .btn:hover {
            background-color: #ff6b81;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        /* 商品展示 */
        .products {
            padding: 50px 5%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 36px;
            color: #333;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #ff6b81;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }

        .product-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .product-image {
            height: 220px;
            background-color: #f5f5f5;
            position: relative;
            overflow: hidden;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .product-card:hover .product-image img {
            transform: scale(1.05);
        }

        .product-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: #ff6b81;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            z-index: 2;
        }

        .product-info {
            padding: 20px;
        }

        .product-title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #333;
            font-weight: 600;
        }

        .product-desc {
            font-size: 14px;
            color: #777;
            margin-bottom: 15px;
            line-height: 1.5;
        }

        .product-price {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .price {
            font-size: 20px;
            font-weight: bold;
            color: #ff6b81;
        }

        .old-price {
            font-size: 16px;
            color: #999;
            text-decoration: line-through;
            margin-right: 10px;
        }

        .discount {
            font-size: 14px;
            background-color: #ff6b81;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
        }

        .product-rating {
            color: #ffc107;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .add-to-cart {
            width: 100%;
            padding: 12px;
            background-color: #ff6b81;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .add-to-cart i {
            margin-right: 8px;
        }

        .add-to-cart:hover {
            background-color: #ff4757;
        }

        /* 页脚 */
        footer {
            background-color: #2f3542;
            color: white;
            padding: 70px 5% 30px;
            margin-top: 80px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-column h3 {
            font-size: 18px;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background-color: #ff6b81;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column li {
            margin-bottom: 12px;
        }

        .footer-column a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s;
            font-size: 14px;
        }

        .footer-column a:hover {
            color: #ff6b81;
        }

        .social-icons {
            display: flex;
            margin-top: 20px;
        }

        .social-icons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            margin-right: 10px;
            transition: all 0.3s;
        }

        .social-icons a:hover {
            background-color: #ff6b81;
            transform: translateY(-3px);
        }

        .copyright {
            text-align: center;
            padding-top: 50px;
            margin-top: 50px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 14px;
            color: #aaa;
        }

        .load-more {
            grid-column-start: 1;
            grid-column-end: 4;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ff4757;
            border-radius: 6px;
            height: 40px;
            margin: 0 43%;
            color: #fff;
        }

        .load-more:hover {
            filter: brightness(0.9);
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .navbar {
                flex-wrap: wrap;
                padding-bottom: 10px;
            }

            .nav-center {
                order: 3;
                width: 100%;
                margin-top: 15px;
            }

            .search-box {
                width: 100%;
                margin: 15px 0;
            }

            .banner h1 {
                font-size: 36px;
            }

            .load-more {
                margin: 0 42%;
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .banner {
                height: 350px;
            }

            .banner h1 {
                font-size: 32px;
            }

            .banner p {
                font-size: 16px;
            }

            .section-title {
                font-size: 28px;
            }

            .load-more {
                grid-column-start: 1;
                grid-column-end: 3;
                margin: 0 40%;
            }
        }

        @media (max-width: 576px) {
            .banner {
                height: 300px;
            }

            .banner h1 {
                font-size: 28px;
            }

            .product-grid {
                grid-template-columns: 1fr;
            }

            .load-more {
                grid-column-start: 1;
                grid-column-end: 2;
                margin: 0 40%;
            }
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">
            <i class="fas fa-shopping-bag"></i>
            精品商城
        </div>

        <div class="nav-center">
            <div class="search-box">
                <input type="text" placeholder="搜索商品...">
                <button><i class="fas fa-search"></i></button>
            </div>
        </div>

        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">商品</a></li>
            <li><a href="#">分类</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系</a></li>
        </ul>

        <!-- 用户昵称下拉菜单 -->
        <div class="user-profile">
            <div class="nickname">
                <span>未登录</span>
                <i class="fas fa-chevron-down arrow"></i>
            </div>
            <div class="dropdown-menu">
                <ul>
                    <li><a href="#"><i class="fas fa-user"></i>个人中心</a></li>
                    <li><a href="#" id="cart-link"><i class="fas fa-shopping-cart"></i>我的订单</a></li>
                    <li><a href="#"><i class="fas fa-heart"></i>我的收藏</a></li>
                    <li><a href="#"><i class="fas fa-cog"></i>设置</a></li>
                    <li><a href="#"><i class="fas fa-sign-out-alt"></i>退出登录</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 横幅 -->
    <section class="banner">
        <div class="banner-content">
            <h1>发现精品，享受生活</h1>
            <p>精选全球优质商品，为您带来非凡购物体验</p>
            <a href="#" class="btn">立即选购</a>
        </div>
    </section>

    <!-- 热门商品 -->
    <section class="products">
        <h2 class="section-title">热门商品</h2>
        <div class="product-grid"></div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <ul>
                    <li><a href="#">品牌故事</a></li>
                    <li><a href="#">团队介绍</a></li>
                    <li><a href="#">招贤纳士</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>客户服务</h3>
                <ul>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">配送方式</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">售后服务</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>商务合作</h3>
                <ul>
                    <li><a href="#">供应商入驻</a></li>
                    <li><a href="#">渠道合作</a></li>
                    <li><a href="#">市场合作</a></li>
                    <li><a href="#">媒体合作</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>关注我们</h3>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-github"></i></a>
                </div>
                <p style="margin-top: 20px; color: #aaa; font-size: 13px;">
                    订阅我们的电子报，获取最新商品资讯和优惠活动
                </p>
            </div>
        </div>

        <div class="copyright">
            © 2023 精品商城 版权所有 | 隐私政策 | 服务条款 | 帮助中心
        </div>
    </footer>

    <!-- JavaScript -->
    <script type="module">
        import { getGoodsList, addToCart } from './js/api.js';
        import toast from './utils/toast.js';

        // DOM工具函数和选择器
        function $(selector) {
            return document.querySelector(selector);
        }

        const doms = {
            username: $('.nickname>span'),
            goodsGrid: $('.product-grid'),
            searchInput: $('.search-box input'),
            searchButton: $('.search-box button')
        };

        // 当前页码
        let currentPage = 1;
        const pageSize = 12;

        // 初始化函数
        async function init() {
            try {
                // 加载用户信息
                loadUserInfo();

                // 加载商品数据
                await loadGoods(currentPage);

                // 初始化事件监听
                initEventListeners();
            } catch (error) {
                toast.error(error.message || '初始化失败');
            }
        }

        // 加载用户信息
        function loadUserInfo() {
            const userInfo = sessionStorage.getItem('user');
            if (userInfo) {
                const userData = JSON.parse(userInfo);
                doms.username.textContent = userData.nickname;
            }
        }

        // 加载商品数据
        async function loadGoods(page) {
            try {
                const result = await getGoodsList({
                    current: page,
                    pagesize: pageSize
                });

                if (!result?.list?.length) {
                    toast.warning('没有更多商品了');
                    return;
                }

                // 创建商品卡片HTML
                const goodsHTML = result.list.map(item => createProductCard(item)).join('');

                // 首次加载时替换，后续加载时追加
                if (page === 1) {
                    doms.goodsGrid.innerHTML = goodsHTML;
                } else {
                    doms.goodsGrid.insertAdjacentHTML('beforeend', goodsHTML);
                }

                // 添加加载更多按钮（如果是第一页或没有更多数据时不添加）
                if (page === 1 || result.list.length === pageSize) {
                    addLoadMoreButton();
                }

                // 为新增的商品添加事件
                addCartButtonEvents();

            } catch (error) {
                throw new Error(`加载商品失败: ${error.message}`);
            }
        }

        // 创建商品卡片HTML
        function createProductCard(item) {
            return `
            <div class="product-card" data-id="${item.goods_id}">
                <div class="product-image">
                    <img src="${item.img_big_logo}" alt="${item.category}">
                    <span class="product-badge">${item.category}</span>
                </div>
                <div class="product-info">
                    <h3 class="product-title">${item.title.length > 16 ?
                    item.title.slice(0, 16) + '...' : item.title}</h3>
                    <p class="product-desc">${item.title}</p>
                    <div class="product-price">
                        <div>
                            <span class="old-price">¥${item.price}</span>
                            <span class="price">¥${item.current_price}</span>
                        </div>
                        <span class="discount">${item.sale_type}</span>
                    </div>
                    <button class="add-to-cart">
                        <i class="fas fa-shopping-cart"></i>
                        加入购物车
                    </button>
                </div>
            </div>`;
        }

        // 添加加载更多按钮
        function addLoadMoreButton() {
            // 移除已有的加载更多按钮
            const existingBtn = $('.load-more');
            if (existingBtn) existingBtn.remove();

            const loadBtn = document.createElement('button');
            loadBtn.className = "load-more";
            loadBtn.textContent = "加载更多";

            loadBtn.addEventListener('click', async () => {
                loadBtn.disabled = true;
                loadBtn.textContent = '加载中...';

                currentPage++;
                await loadGoods(currentPage);
            });

            doms.goodsGrid.appendChild(loadBtn);
        }

        // 为购物车按钮添加事件
        function addCartButtonEvents() {
            const buttons = document.querySelectorAll('.add-to-cart:not([data-bound])');

            buttons.forEach(button => {
                button.setAttribute('data-bound', 'true');

                button.addEventListener('click', function () {
                    const productCard = this.closest('.product-card');
                    const productId = productCard.dataset.id;

                    // 动画效果
                    const originalHTML = this.innerHTML;
                    this.innerHTML = '<i class="fas fa-check"></i> 已添加';
                    this.style.backgroundColor = '#4CAF50';
                    this.disabled = true;

                    // 这里可以添加实际加入购物车的逻辑
                    console.log('加入购物车:', productId);

                    const userInfo = sessionStorage.getItem('user');
                    const userData = JSON.parse(userInfo);

                    addToCart({
                        id: userData.id,
                        goodsId: productId
                    }).then((result) => {
                        if (result.code === 1) {
                            console.log(result.message);
                            toast.success(result.message);
                        }
                    }).catch((err) => {
                        toast.error(err);
                    });
                });
            });
        }

        // 初始化事件监听
        function initEventListeners() {
            // 搜索功能
            function handleSearch() {
                const keyword = doms.searchInput.value.trim();
                if (keyword) {
                    // 实际应用中这里应该是跳转到搜索页面或显示搜索结果
                    // console.log('搜索:', keyword);
                    toast.info(`搜索: ${keyword}`);
                }
            }

            function goToCart(e) {
                e.preventDefault();
                window.open('./cart.html', '_self');
            }

            doms.searchButton.addEventListener('click', handleSearch);
            doms.searchInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') handleSearch();
            });
            document.getElementById('cart-link').addEventListener('click', goToCart);
        }

        // 启动应用
        init();
    </script>
</body>

</html>